<template>
  <div class="info-page">
    <div class="org-header">
      <div class="left">
        组织信息
      </div>
      <div class="btn-list">
        <el-button
          type="primary"
          size="mini"
          plain
          @click="_edit"
        >编辑</el-button>
        <el-button
          type="primary"
          size="mini"
          plain
          @click="_delete"
        >删除</el-button>
      </div>
      <!-- 删除用户组 -->
      <el-dialog
        title="删除用户组"
        v-if="deleteUserGroupDialog"
        :visible.sync="deleteUserGroupDialog"
        width='auto'
        append-to-body
      >
        <m-popover
          ref="popover"
          @ok="_ok"
          @close="close"
        >
          <template slot="content">
            <div
              class="delete-user-model"
              style="padding:40px 25px;"
            >
              <i
                class="el-icon-warning"
                style="margin-right:8px;color:red;font-size: 18px;"
              ></i>
              <span
                class="right"
                style="font-size: 16px;"
                v-if="!isReal"
              >
                请确认是否要删除<span style="color:red;">{{ info.userGroup }}</span>，删除后不可恢复，请谨慎操作！
              </span>
              <span
                class="right"
                style="font-size: 16px;"
                v-else
              >
                用户组已存在关联用户，请先删除用户后，再次尝试！
              </span>
            </div>
          </template>
        </m-popover>
      </el-dialog>
    </div>
    <el-row class="m-row">
      <el-col :span="8">
        <span class="m-label">
          用户组名称：
        </span>
        <span class="m-vlaue">
          {{ info.userGroup ||'-'}}
        </span>
      </el-col>
      <el-col :span="8">
        <span class="m-label">
          备注：
        </span>
        <span class="m-vlaue">
          {{ info.remark ||'-'}}
        </span>
      </el-col>
      <el-col :span="8">
        <span class="m-label">
          状态：
        </span>
        <span :class="info.status?'m-vlaue act':'m-vlaue dop'">
          {{ info.status===1?'启用':'停用' }}
        </span>
      </el-col>
    </el-row>
    <el-row class="m-row">
      <el-col :span="8">
        <span class="m-label">
          用户组管理员：
        </span>
        <span class="m-vlaue">
          {{ info.userAdmin||'-' }}
        </span>
      </el-col>
      <el-col :span="8">
        <span class="m-label">
          关联资源分组：
        </span>
        <span class="m-vlaue">
          {{ info.resourceGroup ||'-'}}
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import mPopover from '@/module/components/popup/popover'
  export default {
    name: 'orgInfo',
    data () {
      return {
        info: {},
        deleteUserGroupDialog: false,
        isReal: false
      }
    },
    watch: {
      currentGroup: {
        handler: function (v) {
          if (v.id) this.info = v
        },
        immediate: true
      }
    },
    computed: {
      ...mapGetters('user', [
        'currentGroup'
      ])
    },
    methods: {
      _ok () {
        if (!this.isReal) {
          // this.$emit('deleteUserGroup', this.info.id)
          this.$store.dispatch('user/deleteUserGroupById', this.info.id)
        }
        this.close()
      },
      close () {
        this.deleteUserGroupDialog = false
      },
      _edit () {
        this.$emit('editGroup')
      },
      _delete () {
        this.deleteUserGroupDialog = true
      }
    },
    components: { mPopover }
  }
</script>
<style scoped lang='scss'>
.info-page {
  border-bottom: 2px solid #ebebeb;
  margin-right: 20px;
  .org-header {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      font-family: PingFang SC, PingFang SC-600;
    }
    .btn-list {
      width: 200px;
      padding-left: 70px;
    }
  }
  .m-row {
    margin-bottom: 10px;
  }
  .act {
    color: #5ab92f;
  }
  .dop {
    color: #f56c6c;
  }
  .m-label {
    width: 84px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #666666;
    line-height: 20px;
  }
  .m-value {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #333333;
    line-height: 20px;
  }
}
</style>
